$titleColor: #AFCFFF;
$numColor: #AFCFFF;  //看新项目要不要用

$wh_100:100%;
$w:1920;
$h:1080;

// $sideWidth : 440px; //看板两侧宽度
// $sidePosition : -440px; //两侧看板动画的公用位置
$sidePosition : calc(-400/#{$w}*100vw); //两侧看板动画的公用位置
$sideBoard : 0 !important; //看板距离两侧位置
$sideWidth : calc(400/#{$w}*100vw); //看板两侧宽度
$rightSideWidth:calc(476/#{$w}*100vw);
//$sideWidth : calc(-512/#{$w}*100vw); //两侧看板动画的公用位置
//$sideBoard : calc(0/#{$w}*100vw) !important; //看板距离两侧位置

//无背景的标题样式
@mixin titleStyle{
  color:$titleColor;
  font-weight: bold;
  line-height: pxTvh(21);
  font-family: Source Han Sans CN-Bold, Source Han Sans CN, sans-serif;
  @include computed_font(14);
}

//首页、交叉口研判到顶的公用样式
@mixin boardToTop($side){
  position: absolute;
  bottom: 0;
  width: $sideWidth;
  height: 100%;
  transition: all 500ms;
  #{$side}: $sidePosition;
  background: rgba(27,40,71,0.65);
  z-index: 1;
  padding: pxTvh(16) pxTvw(4) pxTvh(16) pxTvw(16);
  box-sizing: border-box;
  //背景模糊
  backdrop-filter: blur(30px);
}
@mixin boardToRight(){
  position: absolute;
  bottom: 0;
  width: calc(538/#{$w}*100vw);
  height: 100%;
  transition: all 500ms;
  right: calc(-538/#{$w}*100vw);
  background: rgba(27,40,71,0.65);
  z-index: 1;
  padding: pxTvh(16) pxTvw(12) pxTvh(16) pxTvw(16);
  box-sizing: border-box;
  //背景模糊
  backdrop-filter: blur(30px);
}
//内部滚动条样式
@mixin insideBoard(){
  padding-right: pxTvw(12);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

@mixin wh100{
  width: $wh_100;
  height: $wh_100;
}

//横向转换方法，适用于所有边距、长度方法
@function pxTvw($px){
  @return calc(#{$px}/#{$w}*100vw);
  // @return #{$px}px;
}
//纵向转换方法，适用于所有边距、宽度方法
@function pxTvh($px){
  @return calc(#{$px}/#{$h}*100vh);
  // @return #{$px}px;
}

@mixin imgSize($px){
  // width: #{$px}px;
  // height: #{$px}px;

  width: calc(#{$px}/#{$w}*100vw);
  height: calc(#{$px}/#{$w}*100vw);
}

@mixin textHeight($px) {
  // height: #{$px}px;
  // line-height: #{$px}px;
  height: calc(#{$px} / #{$h} * 100vh);
  line-height: calc(#{$px} / #{$h} * 100vh);
}

@mixin computed_font($size) {
    font-size: calc(#{$size}/#{$w}*100vw);
  // font-size: #{$size}px;
}

// 加载背景图
@mixin add_bgImg() {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

// 弹性盒
@mixin elasticFN($justify,$align) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
}

// 边框样式
@mixin border_Color ($one, $two, $three) {
    border: 1px solid $one;
    background: $two;
    color: $three;
}

// 鼠标变小手
@mixin cursorFN() {
    cursor: pointer;
}

// 字体渐变 或者 icon渐变
@mixin IconFont_Color($direction, $one, $two, $three) {
    background-image: -webkit-linear-gradient($direction, $one, $two, $three);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

// icon背景渐变
@mixin IconFont_Background($direction, $one, $two, $three) {
    background: linear-gradient($direction, $one, $two, $three);
}

//表格内容超过两行就...展示
@mixin tableTextShow(){
  .omit-box{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}

/** 超过的部分用...展示 **/
@mixin overstepForRow(){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
动画封装
 */
@mixin animation($val,$val2,$val3) {
  animation:$val,$val2,$val3;
}
@mixin keyframes($name,$obj) {
  @keyframes #{$name} {
    @each $i,$val in $obj {
      #{$i} {
        @each $v1,$val2 in $val {
          #{$v1}:$val2;
        }
      }
    }
  }
}

@keyframes wordsLoop {
  0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
  }
  100% {
      transform: translateX(10%);
      -webkit-transform: translateX(10%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
  }
  100% {
      transform: translateX(10%);
      -webkit-transform: translateX(10%);
  }
}

// el-plus
@mixin el_collapse_table(){
  .el-collapse{
      height: 100%;
      border-bottom: none;
      .el-collapse-item__content{
          .el-table{
          background-color: transparent;
          tr{
          
          }
          }
      }
  }
  .el-collapse-item__arrow{
    display: none;
  }
  .el-collapse-item__header {
        padding: 0 pxTvw(8);
        height: pxTvh(33);
        background: linear-gradient(270deg, rgba(68,102,188,0) 0%, #33509B 100%);
        border-bottom: 1px solid rgba(106, 145, 227, .4);
        box-sizing: border-box;
        .title{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            &>.left{
                display: flex;
                align-items: center;
                &>.line{
                    margin-right: pxTvw(8);
                    width: pxTvw(4);
                    height: pxTvh(13);
                    background: #3174FF; 
                }
                &>.title-name{
                    @include computed_font(14);
                    font-family: PingFang HK-Regular, PingFang HK;
                    font-weight: 400;
                    color: #DCEAFF;
                    max-width: pxTvw(300);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                } 
            }
            &>.right{
                display: flex;
                align-items: center;
                &>.text{
                    @include computed_font(14);
                    font-family: PingFang HK-Regular, PingFang HK;
                    font-weight: 400;
                    color: #DCEAFF;
                }
                &>.count{
                    @include computed_font(16);
                    font-family: DIN Alternate-Bold, DIN Alternate;
                    font-weight: bold;
                    color: #E2EBFA;
                }
            }
            &>.line{
            position: absolute;
            bottom: 0;
            right: pxTvw(-8);
            width: pxTvw(8);
            height: pxTvh(1);
            background: #3174FF;
            }
        }
  }
  .el-collapse-item__header.is-active{
        background: linear-gradient(270deg, rgba(68,102,188,0) 0%, #33509B 100%);
        border-bottom: 1px solid rgba(106, 145, 227, .4);
  }
  .el-collapse-item__wrap{
        background-color: transparent;
        padding: pxTvh(16) 0;
        border-bottom: none;
        .el-collapse-item__content{
            padding-bottom: 0;
            .list{
            
            }
        }
  }
}